<template>
  <div>
    <a-spin :spinning="loadding">
      <a-modal :width="900" v-model="visible" @ok="handleOk">
        <div class="title" slot="title">
          <div>我的消息</div>
          <div style="margin-right: 50px">
            <a-popover v-model="searchVisible" trigger="click" placement="bottomRight">
              <div slot="content">
                <a-form layout="inline">
                    <a-row>
                     <a-form-item>
                        <a-input placeholder="请输入标题" v-model="queryParam.titile" style="width:100%"></a-input>
                      </a-form-item>
                      <!-- <a-form-item>
                        <a-input placeholder="请输入内容" v-model="queryParam.msgContent" style="width:100%"></a-input>
                      </a-form-item> -->
                    </a-row>
                    <a-row style="margin-top: 10px;text-align: right;">
                      <a-col :span="24">
                        <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                         <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 15px;">查询</a-button>  
                      </a-col>
                    </a-row>
                </a-form>
              </div>
              <a-icon type="filter" />
            </a-popover>
          </div>
        </div>
        <a-list item-layout="vertical" size="large" :pagination="ipagination" :data-source="listData">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <div slot="description">
                <div class="msgContent" :style="{ 'height': item.isFoldShow ? '30px' : '100%' }">
                  <div class="msgContentHtml textellipsis" v-html="item.msgContentHtml"></div>
                </div>
                <div v-if="item.isFoldShow || item.msgContentHtml.indexOf(item.sendTime) === -1">{{item.sendTime}} </div> 
              </div>
              <div slot="title" style="display:flex;align-items: center;justify-content: space-between;">
                <div class="textellipsis" style="width:650px">
                  【{{ item.msgCategory_dictText }}】 
                  <span>
                    <a-tooltip>
                      <template slot="title">
                            {{ item.titile }}
                      </template>
                       {{ item.titile }}
                    </a-tooltip>
                  </span> 
                </div>
                <div>
                    <!-- <a style="float: right" @click="detailHandle(item, index)">查看详情</a> -->
                    <a-icon :type="item.isFoldShow ?'up':'down'" @click="detailHandle(item, index)"/>
                </div>
              </div>
              <span slot="avatar">
                <a-badge :dot="item.readFlag === '0' ? true : false" :offset="[-2, 4]">
                  <div class="icon">
                    <a-icon :type="item.msgCategory === '3' ? 'gateway' : 'bell'" />
                  </div>
                </a-badge>
              </span>
            </a-list-item-meta>
            <!-- <a-divider orientation="right"><a-icon :type="item.isFoldShow ?'up-circle':'down-circle'" @click="foldShowHandle(item, index)"/> </a-divider> -->
          </a-list-item>
        </a-list>
      </a-modal>
    </a-spin>
    <!-- <show-announcement ref="ShowAnnouncement"></show-announcement>
    <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData" /> -->
  </div>
</template>
<script>
import { marked } from 'marked'
import { getAction, putAction } from '@/api/manage'
// import ShowAnnouncement from './ShowAnnouncement'
// import DynamicNotice from './DynamicNotice'
export default {
  components: {
  },
  data() {
    return {
      visible: false,
      loadding: false,
      searchVisible: false,
      listData: [],
      openPath: '',
      formData: '',
      queryParam: {},
      ipagination: {
        current: 1,
        pageSize: 7,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      url: {
        list: '/sys/sysAnnouncementSend/getMyAnnouncementSend',
        editCementSend: 'sys/sysAnnouncementSend/editByAnntIdAndUserId',
      },
    }
  },
  mounted() {
   
  },
  methods: {
    edit() {
       this.getMyAnnouncement()  
    },
    handleOk() {
      this.visible = false
    },
    //翻页
    onPageChange(page, pageSize) {
      this.ipagination.current = page
      this.getMyAnnouncement()
    },
    //切换每页数量
    onSizeChange(page, pageSize) {
      this.ipagination.pageSize = pageSize
      this.getMyAnnouncement()
    },
    //查看详情
    detailHandle(record, index) {
      record.isFoldShow = !record.isFoldShow
      if (record.readFlag ==='0') { 
      putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
        if (res.success) {
          this.syncHeadNotic(record.anntId)
        }
      })
      // if (record.openType === 'component') {
      //   this.openPath = record.openPage
      //   this.formData = { id: record.busId }
      //   this.$refs.showDynamNotice.detail()
      // } else {
      //   this.$refs.ShowAnnouncement.detail(record)
      // }
      record.readFlag = '1'
      this.$set(this.listData,index,record)
      //  this.$set(this.listData[index], 'readFlag', '1')
        this.$emit('readFlagHandle', '1')
      }
    },
    syncHeadNotic(anntId) {
      getAction('sys/annountCement/syncNotic', { anntId: anntId })
    },
    //获取我的消息
    getMyAnnouncement() {
      let params = {
        titile: this.queryParam.titile,
        column: 'createTime',
        order: 'desc',
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      }
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          if (res.result.records && res.result.records.length > 0) {
            res.result.records.map((item) => {
              if (item.msgContent) {
                item.msgContentHtml = marked.parse(item.msgContent)
                if (item.titile.indexOf('工资条')>-1) { 
                //  item.msgContentHtml = item.msgContentHtml.replace(/<\/?(img)[^>]*>/g, '')
                item.msgContentHtml = this.imgTagAddStyle(item.msgContentHtml)
                }
              } else {
                item.msgContentHtml = ''
              }
               item.isFoldShow = true
            })
          }
          this.listData = res.result.records ? res.result.records : []
          this.ipagination.total = res.result.total
          this.ipagination.current = res.result.current
        } else {
          this.$message.warning(res.message)
        }
      }) 
    },
 
    imgTagAddStyle (htmlstr) {
      // 正则匹配所有img标签，给图片设置样式
      var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)", 'gmi')
      htmlstr = htmlstr.replace(regex1, '$2 style="width:8%;height:auto"$3')
      return htmlstr
    },
    //查询
    searchQuery() { 
       this.getMyAnnouncement() 
    },
    //重置
    searchReset() { 
      this.queryParam = {}
       this.getMyAnnouncement() 
    },
    //点击展开折叠
    // foldShowHandle(record,index) { 
    //     record.isFoldShow = !record.isFoldShow
    //    this.$set(this.listData,index,record)
    // }
  },
}
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.textellipsis{
 overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.msgContent {
  width: 800px;
  margin: 6px 0 0px 0;
  overflow: hidden;
}
.msgContentHtml{
  width: 700px;
 overflow: hidden;
}
 p{
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(121, 145, 157);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon i {
  color: #fff;
  font-size: 16px;
}
/deep/.ant-list-lg .ant-list-item{
  padding: 6px 0;
}
/deep/.ant-list-vertical .ant-list-item-meta {
  margin-bottom: 0;
  padding: 0;
}
/deep/.ant-list-vertical .ant-list-item-meta-title {
  color: #000000;
  font-size: 15px;
  margin-bottom: 0;
}
/deep/.ant-list-item-meta-title > a {
  color: rgba(0, 0, 0, 0.8);
}
/deep/.ant-form-inline .ant-form-item{
  width: 100%;
}
/deep/.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label{
  width: 100%;
}
/* /deep/.ant-list-split .ant-list-item{
  border-bottom: 0;
} */
/deep/.ant-divider-horizontal.ant-divider-with-text-right{
  margin: 6px 0;
}
</style>